<template>
  <div class="myheader">
    <div class="flex" style=" justify-content: space-around;">
      <div class="flex">
        <img class="show" src="../assets/文创赋能空间.jpg" style="border-radius: 10px;cursor: pointer;" height="40"
             @click="toIndex"/>
        <span class="font">{{ headerName }}</span>
      </div>
      <div style="width: 300px">
        <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click.prevent.native="search()"></el-button>
        </el-input>
      </div>
      <div class="flex">
        <el-dropdown style="line-height: 0" v-if="islogin">
          <el-avatar shape="square" :class="{'logodiv':checkIsDoctor}" :src="usermsg.img" style="cursor: pointer;"></el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native.prevent="logOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown style="line-height: 0" v-else>
          <el-avatar shape="square" style="cursor: pointer;"> user</el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native.prevent="click">登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: "Header",
  data: function () {
    return {
      input: "",
      islogin: false,
      usermsg: {},
      dd: null,
      familyNumber: null,
      modal: false,
      centerDialogVisible: false,
      keyword: '',
      checkIsDoctor: false
    }
  },
  props: [
    "headerName"
  ],
  mounted() {
    let token = window.localStorage.getItem('myToken');
    if (token == null) {
      this.islogin = false
    } else {
      this.islogin = true
      this.dd = window.setInterval(this.reGetToken, 100000)
      this.getHimSelf().then(async res => {
        await this.getimg(res.logo).then(data => {
          res.img = data
        })
        await this.isDoctor(res.id).then(res => {
          this.checkIsDoctor = res
        })
        this.usermsg = res
      })
      this.islogin = true
    }
  },
  methods: {
    isDoctor(id) {
      return new Promise(resolve => {
        this.$http.get("/doctor/isDoctor/" + id).then(res => {
          resolve(res.data)
        })
      })
    },
    search() {
      this.$store.commit('setKeywords', this.keyword)
      this.$router.push("/index")
    },
    getFamily(id) {
      return new Promise(resolve => {
        this.$http.get("/user/getByFid/" + id).then(data => {
          // console.log(data)
          resolve(data.data)
        })
      })
    },
    toIndex() {
      this.$router.push("/login")
    },
    click() {
      this.$router.push("/")
    },
    reGetToken() {
      this.$http.get('/login/reGetToken').then(data => {
        if (data.code == 400) {
          window.localStorage.removeItem("myToken")
          this.$message.warning("登录状态过期")
          this.$router.push("/login")
          return
        }
        this.$store.commit("setToken", data.data.token)
      })
    },
    getHimSelf() {
      return new Promise(resolve => {
        this.$http.get("/login/getUserHimself").then(res => {
          resolve(res.data)
        })
      })
    },
    getimg(id) {
      return new Promise(resolve => {
        this.$http({
          url: "/file/img/" + id,
          method: "get",
          responseType: "arraybuffer",
        }).then(res => {
          let bytes = new Uint8Array(res);
          let storeData = "";
          let len = bytes.byteLength;
          for (let i = 0; i < len; i++) {
            storeData += String.fromCharCode(bytes[i]);
          }
          let database = "data:image/png;base64," + window.btoa(storeData);
          resolve(database);
        });
      })
    },
    toggleMenu() {
      this.isShow = !this.isShow
      const route = document.getElementsByClassName('route-content')[0]
      if (this.isShow) {
        route.classList.add('route-filter')
      } else {
        route.classList.remove('route-filter')
      }
    },
    tologin() {
      this.$router.push("/login")
    },
    async logOut() {
      window.localStorage.removeItem("myToken")
      this.$message.success("退出登录成功")
      this.$router.push("/")
    },
  }
}
</script>

<style scoped>
.flex {
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
}


.font {
  margin-left: 20px;
  font-size: larger;
  font-family: 宋体;
  font-weight: bold;
  color: #4dc9c9;
}

.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.myheader {
  position: fixed;
  line-height: 50px;
  height: 50px;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #6a6060;
  z-index: 200;
  /*border-bottom: 1px dashed #f5f2f2;*/
}

/*.logodiv {*/
/*  border-radius: 50%;*/
/*}*/

.logodiv:before,
.logodiv:after {
  position: absolute;
  content: "";
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
  border: 5px solid #FF33FF;
}

.logodiv:before {
  animation: move 5s linear infinite;
}

.logodiv:after {
  border-color: #FF33FF;
  animation: move 5s linear infinite normal -2.5s;
}

@keyframes move {
  0%, 100% {
    clip: rect(0, 200px, 5px, 0);
  }
  25% {
    clip: rect(0, 200px, 200px, 195px);
  }
  50% {
    border-color: #00ff0088;
    clip: rect(195px, 200px, 200px, 0);
  }
  75% {
    clip: rect(0, 5px, 200px, 0px);
  }
}
</style>